<!--资源管理主组件-->
<template>
    <div class="app_content">
        <div class="table_qy">
            <div class="middle lb_title">资源管理</div>
            <!--按钮区域-->
            <div class="middle gnan" ref="element">
                <el-button type="primary" size="mini" class="button_search" @click="addYjzy()">新增一级资源</el-button>
            </div>
            <!--table区域-->
            <div class="table_padding">
                <div class="table_content">
                    <el-table :data="tableData" :height="scrollerHeight" stripe border class="table_overflow"
                              row-key="gnzyid" default-expand-all
                              :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                        <el-table-column prop="tb" label="图标" width="200">
                            <template slot-scope="scope">
                                <el-button v-if="scope.row.tb === '' || scope.row.tb === undefined"
                                           @click="xgtb(scope.row)" type="text">图标
                                </el-button>
                                <el-button v-else-if="scope.row.tb !== '' && scope.row.tb !== undefined" size="middle"
                                           @click="xgtb(scope.row)" type="text"><i
                                        :class="'tb_ys el-icon-' + scope.row.tb "></i></el-button>
                            </template>
                        </el-table-column>
                        <el-table-column v-if="false" type="gnzyid" label="功能资源ID"></el-table-column>
                        <el-table-column v-if="false" type="fcdid" label="父亲ID"></el-table-column>
                        <el-table-column prop="gnzymc" label="菜单名称" width="200"></el-table-column>
                        <el-table-column prop="zymchz" label="资源名称后缀" width="110"></el-table-column>
                        <el-table-column prop="qqlj" label="请求路径" :show-overflow-tooltip="true"
                                         width="200"></el-table-column>
                        <el-table-column prop="pxh" label="排序号" width="80"></el-table-column>
                        <el-table-column prop="sfwym" label="是否微页面" width="100">
                            <template slot-scope="scope">
                                <span v-if="scope.row.sfwym === 0">否</span>
                                <span v-else-if="scope.row.sfwym === 1">是</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="dbssxyybs" label="待办所属小应用标识" width="200"></el-table-column>
                        <el-table-column prop="dblxbs" label="待办类型标识" :show-overflow-tooltip="true"
                                         width="120"></el-table-column>
                        <el-table-column prop="gnzymssl" label="功能资源明细数量" :show-overflow-tooltip="true" width="150">
                            <template slot-scope="scope">
                                <el-button v-if="scope.row.gnzymssl === '' || scope.row.gnzymssl === undefined"
                                           size="small" @click="gnzymx(scope.row)" type="text">0
                                </el-button>
                                <el-button v-else-if="scope.row.gnzymssl !== '' && scope.row.gnzymssl !== undefined"
                                           size="small" @click="gnzymx(scope.row)" type="text">{{scope.row.gnzymssl}}
                                </el-button>
                            </template>
                        </el-table-column>

                        <el-table-column prop="sfpdqx" label="是否判断权限" :show-overflow-tooltip="true" width="120">
                            <template slot-scope="scope">
                                <span v-if="scope.row.sfpdqx === 0">否</span>
                                <span v-else-if="scope.row.sfpdqx === 1">是</span>
                            </template>
                        </el-table-column>

                        <el-table-column prop="" label="操作" width="200">
                            <template slot-scope="scope">
                                <el-button v-if="scope.row.sfwym === 0" size="small" @click="addGnzy(scope.row)"
                                           type="text"><i class="el-icon-circle-plus-outline tb_ys"></i></el-button>
                                <el-button size="small" @click="modifyGnzy(scope.row)" type="text"><i
                                        class="el-icon-edit-outline tb_ys"></i></el-button>
                                <el-button size="small" type="text" @click="del(scope.row)"><i
                                        class="el-icon-delete tb_ys"></i></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
        <!--引入图标选择弹窗-->
        <IconGnzyDialog ref="iconGnzyDialog" @findListGnzy="findListGnzy()"></IconGnzyDialog>
        <ModifyGnzyDialog ref="modifyGnzyDialog" @findListGnzy="findListGnzy()"></ModifyGnzyDialog>
        <GnzymxDialog ref="gnzymxDialog" @findListGnzy="findListGnzy()"></GnzymxDialog>
        <AddGnzyDialog ref="addGnzyDialog" @findListGnzy="findListGnzy()"></AddGnzyDialog>
    </div>
</template>

<script>
    import {jcqxCnzyFindList, jcqxCnzyDel} from '../../../../api/app/xtgl0301/zygl.js'
    import IconGnzyDialog from './iconGnzyDialog'
    import ModifyGnzyDialog from './modifyGnzyDialog'
    import GnzymxDialog from './gnzymxDialog'
    import AddGnzyDialog from "./addGnzyDialog"

    export default {
        name: "zygl",
        data() {
            return {
                //table高度
                scrollerHeight: "",
                //table绑定的数据
                tableData: [],
            }
        },
        mounted() {
            //如果复杂的初始化操作 加注解
            this.findListGnzy()
            let height = this.$refs.element.offsetHeight;
            this.scrollerHeight = (window.innerHeight - height - 170) + 'px'
        },
        methods: {//必须加注解
            //查询
            async findListGnzy() {
                let result = await jcqxCnzyFindList()

                if (result.code != 200) {
                    //错误提示
                } else {
                    this.tableData = result.data.content
                }

            },
            //新增一级资源
            addYjzy() {
                this.$refs['addGnzyDialog'].show()
            },
            //新增功能资源
            addGnzy(row) {
                this.$refs['addGnzyDialog'].fcdid = row.gnzyid
                this.$refs['addGnzyDialog'].show()
            },
            // 修改功能资源
            modifyGnzy(row) {
                this.$refs['modifyGnzyDialog'].add_show = false
                this.$refs['modifyGnzyDialog'].modify_show = true
                this.$refs['modifyGnzyDialog'].gnzyid = row.gnzyid

                if (row.sfwym == 1) {
                    this.$refs['modifyGnzyDialog'].sfpdqx_show = true
                    this.$refs['modifyGnzyDialog'].qqlj_show = true
                    this.$refs['modifyGnzyDialog'].formInline.sfwym = row.sfwym.toString()
                    this.$refs['modifyGnzyDialog'].formInline.sfpdqx = row.sfpdqx.toString()
                } else {
                    this.$refs['modifyGnzyDialog'].sfpdqx_show = false
                    this.$refs['modifyGnzyDialog'].qqlj_show = false
                }
                this.$refs['modifyGnzyDialog'].formInline.qqlj = row.qqlj
                this.$refs['modifyGnzyDialog'].formInline.gnzymc = row.gnzymc
                this.$refs['modifyGnzyDialog'].formInline.zymchz = row.zymchz
                this.$refs['modifyGnzyDialog'].formInline.pxh = row.pxh
                this.$refs['modifyGnzyDialog'].formInline.dbssxyybs = row.dbssxyybs
                this.$refs['modifyGnzyDialog'].formInline.dblxbs = row.dblxbs
                this.$refs['modifyGnzyDialog'].show()
            },
            // 删除功能资源
            async del(row) {
                this.$confirm('确定删除吗?', '提示', {
                    cancelButtonText: '取消',
                    confirmButtonText: '确定',
                    type: 'warning'
                }).then(async () => {
                    let parms = {
                        gnzyid: row.gnzyid
                    }
                    let data = await jcqxCnzyDel(parms);

                    if (data.code === 200) {
                        this.$notify({
                            title: '成功',
                            type: 'success',
                            message: '删除成功',
                            dangerouslyUseHTMLString: true
                        });
                        await this.findListGnzy();
                    } else {
                        this.$notify({
                            title: '失败',
                            type: 'danger',
                            message: '删除失败',
                            dangerouslyUseHTMLString: true
                        });
                    }
                });
            },
            xgtb(row) {//修改图标
                this.$refs['iconGnzyDialog'].gnzyid = row.gnzyid
                this.$refs['iconGnzyDialog'].show()
            },
            gnzymx(row) {
                this.$refs['gnzymxDialog'].gnzyid = row.gnzyid
                this.$refs['gnzymxDialog'].showOuter()
                this.$refs['gnzymxDialog'].findGnzymxList()
            }
        },
        components: {
            AddGnzyDialog,                                                            //注册组件
            IconGnzyDialog,
            ModifyGnzyDialog,
            GnzymxDialog
        },
    }
</script>

<style scoped>
    @import "../../../../styles/app0301.scss";
</style>